<template>
  <view class="container">
    <view class="order-box">
      <view class="flex-ac box-title">
        <view class="line"></view>
        <view>操作人员</view>
      </view>
      <view class="flex">
        <view>调度司机</view>
        <view class="value" @click="open">请选择调度司机</view>
      </view>
    </view>
    <view class="order-box">
      <view class="flex-ac box-title">
        <view class="line"></view>
        <view>车辆外观</view>
      </view>
      <view class="flex-wrap file-box">
        <UploadFile title="车前" />
        <UploadFile title="车后" />
        <UploadFile title="左侧" />
        <UploadFile title="右侧" />
        <UploadFile title="车辆外观视频" />
      </view>
      <view class="mg40">
        <view class="flex-ac">
          <view>车损确认</view>
          <up-radio-group v-model="value" placement="row" activeColor="#986C5D" class="ml80" size="17" labelSize="12" labelColor="#000">
            <up-radio label="有车损" name="0"></up-radio>
            <up-radio label="无车损" name="1" class="ml20"></up-radio>
          </up-radio-group>
        </view>
        <view class="flex-wrap file-box">
          <UploadFile title="车前" />
          <UploadFile title="车后" />
          <UploadFile title="左侧" />
          <UploadFile title="右侧" />
        </view>
      </view>
    </view>
    <view class="order-box">
      <view class="flex-ac box-title">
        <view class="line"></view>
        <view>车辆内饰</view>
      </view>
      <view class="flex-wrap file-box">
        <UploadFile title="仪表盘" />
        <UploadFile title="车辆内饰视频" />
      </view>
    </view>
    <view class="order-box">
      <view class="flex-ac box-title">
        <view class="line"></view>
        <view>车辆状态</view>
      </view>

      <view class="flex-ac mt20">
        <view>油量</view>
        <up-input placeholder="请输入" border="none" color="#999" v-model="value" class="value"></up-input>
      </view>
      <view class="flex-ac mt20">
        <view>油量</view>
        <up-input placeholder="请输入" border="none" color="#999" v-model="value" class="value"></up-input>
      </view>
      <view class="flex-ac mt20">
        <view>总里程</view>
        <up-input placeholder="请输入" border="none" color="#999" v-model="value" class="value"></up-input>
      </view>
    </view>
    <up-button type="primary" color="#000" text="确认调度出库" @click="handleClick" class="mt120"></up-button>
    <CustomPopup :list="model.list" :pro="{ key: 'name', value: 'phone' }" title="送车司机" ref="showPopup"></CustomPopup>
  </view>
</template>
<script setup>
import { ref, reactive } from "vue";
import CustomPopup from "@/components/custom-popup/index.vue";
import { onLoad } from "@dcloudio/uni-app";
import UploadFile from "@/components/uploadFile/index.vue"
const showPopup = ref(null);
const model = reactive({
  param: {},
  list: [
    { name: "张三", phone: "177777777" },
    { name: "张2", phone: "177777777" },
    { name: "张3", phone: "177777777" },
    { name: "张4", phone: "177777777" },
    { name: "张5", phone: "177777777" },
  ]
});
const handleClick = () => {

};

const close = () => {
  showPopup.value.close()
}
const open = () => {
  showPopup.value.open()
}
onLoad((options) => {
  console.log(options);
  if (options.param) {
    model.param = JSON.parse(options.param);
  }
})
</script>
<style lang="scss" scoped>
.container {

  .order-box {
    margin-bottom: 32rpx;

    .title view {
      font-weight: bold;
    }

   

    .value {
      color: #999999;
      margin-left: 24rpx;
    }

    .file-box {
      gap: 32rpx 45rpx;
    }
  }
  .mg40{
    margin: 40rpx 0;
  }
}
</style>